<script setup>
import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>

<template>
  <button
    class="flex items-center justify-center"
    aria-label="Dark Mode"
    :aria-open="isDark"
    @click="toggleDark()"
  >
    <IconMoon class="hidden hover:opacity-50 dark:block" />
    <IconSun class="block hover:opacity-50 dark:hidden" />
  </button>
</template>
